<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>测试</title>
		<style type="text/css">
			.biaodan{
				margin: 0 auto;
				width: 750px;
				height: 480px;
				display: flex;
				flex-direction: column;
				font-size: 16px;	
				font-family: "微软雅黑";		
				line-height: 40px;
			}
			span{
				display: inline-block;
				text-align: right;
				width: 100px;
				padding-right: 6px;
			}
			
			#text{
				text-align: center;
				
				padding: 20px;
			}
			table{
				display: flex;
				width: 900px;
				margin: 0 auto;
			}
			th{
				border: 1px #757575 solid;
				font-size: 16px;	
				font-family: "微软雅黑";	
				line-height: 18px;
			}
			td{
				border: 1px #757575 solid;
				line-height: 16px;
			}
			.del{
				color: blue;
				cursor:pointer;
				
				text-align: center;
			}
		</style>
	</head>
	<body>
		<div class="biaodan">
			<form method="post">
				<div >
					<span>姓名：</span><input id="username" type="text" placeholder="请输入姓名" 
				</div>
				<div >
					<span>班级：</span><input id="class" type="text" placeholder="请输入班级" 
				</div>
				<div >
					<span>学号：</span><input id="id" type="text" placeholder="请输入学号" 
				</div>
				<div id="bottom">	
					<span><input type="button"  onclick="getValue()" id="btn" value="提交" /></span>
					
				</div>
				
			</form>
		</div>	
		
		<div id="text">
			
		</div>
		<table id="tbody" style="border: 1px #757575 solid;">
			<header>
				<th width="300px">
					姓名
				</th>
				<th width="300px">
					学号
				</th>
				<th width="300px">
					班级
				</th>
				<th width="300px">
					操作栏
				</th>
			</header>
			
		    <tr id="tr1">
		        <td>张三</td>
		        <td>001</td>
		        <td>计算机</td>
		        <td class="del" onclick="del(this)">删除</td>
		    </tr>
		   
		</table>
	</body>
	<script type="text/javascript">
		function getValue(){
			let oUsername=document.getElementById('username')
			let usernameStr=oUsername.value
			if(usernameStr.length===0){
				alert("请输入姓名！")
				return
			}
			let oclass=document.getElementById('class')
			let classStr=oclass.value
			if(classStr.length===0){
				alert("请输入班级名称！")
				return
			}
			let oid=document.getElementById('id')
			let idStr=oid.value
			if(idStr.length===0){
				alert("请输入学号！")
				return
				
			console.log(usernameStr)
			console.log(classStr)
			console.log(idStr)
			}
		}
		
//		function addText(){
//          let oTr = document.createElement('tr');
//          let tdname = document.createElement('td');
//          let tdclass = document.createElement('td');
//          let tdid = document.createElement('td');
//          let oDelete = document.createElement('td');
////			let ousername=document.getElementById('username')
//          tdusername.innerText =uesrname;
////			let oclass=document.getElementById('class')
//          tdclass .innerText = class';
////			let oid=document.getElementById('id')
//			tdid.innerText = id;
// 
//          oDelete .className ='del'
//			oDelete .setAttribute('onclik','del(this)')
//             
//          tr.appendChild(tdclass);
//          tr.appendChild(tdclass);
//          tr.appendChild(tdid);
//          tr.appendChild(oDelete);
// 
//          let oTbody = document.getElementsByTagName('tbody')[0]
//			oTbody.appendChild(oTr);
//          }

		function del(e){
			console.dir(e.parentNode.parentNode)
			e.parentNode.parentNode.removeChild(e.parentNode)
		}
		
	</script>
</html>
